<template>
  <div class="holiday-form-warp">
    <div class="form-group">
      <label class="form-label">节日名称：</label>
      <div class="form-element">
        <input v-model="form.name" type="text" class="form-input" placeholder="节日名称">
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">节日日期：</label>
      <div class="form-element">
        <DatePicker v-model="form.date" style="width: 100%" @change="changeDate" />
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">休息日期：</label>
      <div class="form-element">
        <DatePanel ref="restPicker" v-model="form.restDays" />
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">调休日期：</label>
      <div class="form-element">
        <DatePanel ref="workPicker" v-model="form.workDays" />
      </div>
    </div>
    <div class="form-group">
      <div class="form-element">
        <button class="form-btn" @click="submitForm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import DatePicker from '../components/DatePicker'
import DatePanel from '../components/DatePanel'
export default {
  name: 'HolidayForm',
  components: {
    DatePicker,
    DatePanel
  },
  data() {
    return {
      form: {
        name: '',
        date: '',
        restDays: [],
        workDays: []
      }
    }
  },
  methods: {
    resetForm(form) {
      if (form) {
        const plan = Object.assign({}, form)
        this.form = plan
        this.changeDate(form.date)
      } else {
        this.form = {
          name: '',
          date: '',
          restDays: [],
          workDays: []
        }
      }
    },
    changeDate(date) {
      if (date) {
        this.$refs['restPicker'].setCalendarView(date)
        this.$refs['workPicker'].setCalendarView(date)
      }
    },
    submitForm() {
      const plan = Object.assign({}, this.form)
      this.$emit('add-plan', plan)
      this.form = {
        name: '',
        date: '',
        restDays: [],
        workDays: []
      }
    }
  }
}
</script>
<style scoped>
  .form-input{
    width: 240px;
    height: 38px;
    line-height: 20px;
    padding: 8px;
    border-radius: 4px;
    outline: none;
    border: 1px solid #d1d1d1;
    font-size: 14px;
    color: #3a3c3e;
  }
  .form-btn{
    cursor: pointer;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding:  5px 8px;
    border-radius: 4px;
    outline: none;
    border: 1px solid #2d7dff;
    font-size: 14px;
    color: #ffffff;
    background-color: #2d7dff;
    box-sizing: content-box;
  }
  .form-input:focus{
    border: 1px solid #2d7dff;
  }
  .form-label{
    display: block;
    float: left;
    line-height: 20px;
    padding: 8px;
    font-size: 14px;
    color: #3a3c3e;
  }
  .form-element{
    margin-left: 86px;
  }
  .form-element .form-input{
    width: 100%;
    box-sizing: border-box;
  }
  .form-group{
    margin-bottom: 15px;
  }
  .form-group:after{
    content: '';
    clear: both;
  }
</style>
